<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选</title>
    <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../src/css/index.css">
</head>

<body>
    <header class="header">
        <div class="wrap">
            <div class="log">
                <a href="#">
                    <img src="../src/images/log.png" alt="" class="log-pic">
                    <div class="log_desc">
                        <h2 class="log-title">熊猫优选</h2>
                        <span class="log-info">XIONG MAO YOU XUAN</span>
                    </div>
                </a>
            </div>
            <div class="search">
                <input type="text" name="search" placeholder="搜索商品，发现更多优惠" class="search_input">
                <span class="btn-search">搜索</span>
            </div>
            <div class="advantage">
                <ul class="advantage-list">
                    <li class="advantage-item">
                        <img src="../src/images/head_exemption.png" alt="">
                        <span class="advantage-info">全程包邮</span>
                    </li>
                    <li class="advantage-item">
                        <img src="../src/images/head_exchange.png" alt="">
                        <span class="advantage-info">7天包退</span>
                    </li>
                    <li class="advantage-item">
                        <img src="../src/images/head_quality.png" alt="">
                        <span class="advantage-info">凭证保证</span>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <nav class="nav">
        <ul class="nav-list wrap">
            <li class="list-item active" data-hash="#tab1">首页</li>
            <li class="list-item" data-hash="#tab2">9块9包邮</li>
            <li class="list-item" data-hash="#tab3">超值大额卷</li>
            <li class="list-item" data-hash="#tab4">夏季女装上新</li>
        </ul>
    </nav>
    
    <div class="choice">
        <ul class="choice-list">
            <!-- <li class="choice-item">
                    <div class="choice-item-img">
                        <img src="../src/images/item_img.jpg" alt="">
                    </div>
                    <div class="choice-item-info">
                        <p class="choice-item-desc">
                            小苍兰香水沐浴露香体持久留香滋润男女网红沐浴乳液家庭装大容量
                        </p>
                        <div class="choice-item-keys">
                            <span class="tmall">天猫</span>
                            <span class="free-postage"">包邮</span>
                    </div>
                    <div class=" choice-item-foot">
                                <div class="price">
                                    <span class="price-tag">￥</span>
                                    <span class="price-strong">6</span>
                                    <span class="price-digit">.9</span>
                                    <span class="sale-num">4.1万人购买</span>
                                </div>
                                <div class="coupon-value">
                                    <span>3元券</span>
                                </div>
                        </div>
                    </div>
                </li> -->
        </ul>
        <div class="lookmove">
            <button class="btn-more">
                查看更多
            </button>
        </div>
        <div id="load">
            <i class="icon-load"></i>
            <span class="icon-load-info">用力载入中...</span>
        </div>
    </div>
    <div class="back-top" id="back_top">
        <img src="../src/images/moveTOP.png" alt="">
    </div>
    <footer>
        <div class="wrap footer">
            <div class="foot-container">
                <div class="foot_log">
                    <img src="../src/images/log.png" alt="">
                    <div class="foot_log_desc">
                        <h3 class="foot_log_title">熊猫优选</h3>
                        <p class="foot_log_text">年轻人网购首选</p>
                        <p class="foot_log_text">购物领券更省钱</p>
                    </div>
                </div>
                <div class="app">
                    下载APP
                </div>
            </div>
            <div class="foot-info">
                <img src="../src/images/foot_policeIcon.png" alt="">
                <p class="foot-desc">
                    浙公安网备案 33010602009949号 | 增值电信业务经营许可证：浙B2-20160363 |
                    ICP备案号:浙ICP备17012864号-1
                </p>
            </div>
        </div>
        <div class="pagefoot">
            <img src="../src/images/foot_pagefoot.png" alt="">
        </div>
    </footer>
    <script type="text/html" id="bannerBox">
            <div class="wrap" id="main">
                <div class="indexBanner">
                    <aside class="sidebar">
                        <ul class="sidebar-list">
                            <li class="sidebar-item">
                                <img class="icon" src="../src/images/list_wowan.png" alt="">
                                <p class="sidebar-info">女装</p>/
                                <p class="sidebar-info">女鞋</p>
                                <div class="sidebar-panel">
                                    <div class="sidebar-panel-item">
                                        <h3 class="panel-item-title">男装</h3>
                                        <ul class="sidebar-panel-list">
                                            <li class="panel-list-item">
                                                全网爆款
                                            </li>
                                            <li class="panel-list-item">
                                                夏日限定
                                            </li>
                                            <li class="panel-list-item">
                                                耳饰
                                            </li>
                                            <li class="panel-list-item">
                                                发饰
                                            </li>
                                            <li class="panel-list-item">
                                                项链手链
                                            </li>
                                            <li class="panel-list-item">
                                                帽子
                                            </li>
                                            <li class="panel-list-item">
                                                戒指
                                            </li>
                                            <li class="panel-list-item">
                                                手表腰带
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="sidebar-item ">
                                <img class="icon" src="../src/images/list_shoe.png" alt="">
                                <p class="sidebar-info">男装</p>/
                                <p class="sidebar-info">男鞋</p>
                                <div class="sidebar-panel">
                                    <div class="sidebar-panel-item">
                                        <h3 class="panel-item-title">男装</h3>
                                        <ul class="sidebar-panel-list">
                                            <li class="panel-list-item">
                                                全网爆款
                                            </li>
                                            <li class="panel-list-item">
                                                夏日限定
                                            </li>
                                            <li class="panel-list-item">
                                                耳饰
                                            </li>
                                            <li class="panel-list-item">
                                                发饰
                                            </li>
                                            <li class="panel-list-item">
                                                项链手链
                                            </li>
                                            <li class="panel-list-item">
                                                帽子
                                            </li>
                                            <li class="panel-list-item">
                                                戒指
                                            </li>
                                            <li class="panel-list-item">
                                                手表腰带
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="sidebar-item ">
                                <img class="icon" src="../src/images/list_lipstick.png" alt="">
                                <p class="sidebar-info">美妆</p>/
                                <p class="sidebar-info">个护</p>
                                <div class="sidebar-panel">
                                    <div class="sidebar-panel-item">
                                        <h3 class="panel-item-title">男装</h3>
                                        <ul class="sidebar-panel-list">
                                            <li class="panel-list-item">
                                                全网爆款
                                            </li>
                                            <li class="panel-list-item">
                                                夏日限定
                                            </li>
                                            <li class="panel-list-item">
                                                耳饰
                                            </li>
                                            <li class="panel-list-item">
                                                发饰
                                            </li>
                                            <li class="panel-list-item">
                                                项链手链
                                            </li>
                                            <li class="panel-list-item">
                                                帽子
                                            </li>
                                            <li class="panel-list-item">
                                                戒指
                                            </li>
                                            <li class="panel-list-item">
                                                手表腰带
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="sidebar-item ">
                                <img class="icon" src="../src/images/list_Bitmap4.png" alt="">
                                <p class="sidebar-info">配饰</p>/
                                <p class="sidebar-info">箱包</p>
                                <div class="sidebar-panel">
                                    <div class="sidebar-panel-item">
                                        <h3 class="panel-item-title">男装</h3>
                                        <ul class="sidebar-panel-list">
                                            <li class="panel-list-item">
                                                全网爆款
                                            </li>
                                            <li class="panel-list-item">
                                                夏日限定
                                            </li>
                                            <li class="panel-list-item">
                                                耳饰
                                            </li>
                                            <li class="panel-list-item">
                                                发饰
                                            </li>
                                            <li class="panel-list-item">
                                                项链手链
                                            </li>
                                            <li class="panel-list-item">
                                                帽子
                                            </li>
                                            <li class="panel-list-item">
                                                戒指
                                            </li>
                                            <li class="panel-list-item">
                                                手表腰带
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="sidebar-item ">
                                <img class="icon" src="../src/images/list_snacks.png" alt="">
                                <p class="sidebar-info">零食王国</p>
                                <div class="sidebar-panel">
                                    <div class="sidebar-panel-item">
                                        <h3 class="panel-item-title">男装</h3>
                                        <ul class="sidebar-panel-list">
                                            <li class="panel-list-item">
                                                全网爆款
                                            </li>
                                            <li class="panel-list-item">
                                                夏日限定
                                            </li>
                                            <li class="panel-list-item">
                                                耳饰
                                            </li>
                                            <li class="panel-list-item">
                                                发饰
                                            </li>
                                            <li class="panel-list-item">
                                                项链手链
                                            </li>
                                            <li class="panel-list-item">
                                                帽子
                                            </li>
                                            <li class="panel-list-item">
                                                戒指
                                            </li>
                                            <li class="panel-list-item">
                                                手表腰带
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="sidebar-item ">
                                <img class="icon" src="../src/images/list_infant.png" alt="">
                                <p class="sidebar-info">母婴用品</p>
                                <div class="sidebar-panel">
                                    <div class="sidebar-panel-item">
                                        <h3 class="panel-item-title">男装</h3>
                                        <ul class="sidebar-panel-list">
                                            <li class="panel-list-item">
                                                全网爆款
                                            </li>
                                            <li class="panel-list-item">
                                                夏日限定
                                            </li>
                                            <li class="panel-list-item">
                                                耳饰
                                            </li>
                                            <li class="panel-list-item">
                                                发饰
                                            </li>
                                            <li class="panel-list-item">
                                                项链手链
                                            </li>
                                            <li class="panel-list-item">
                                                帽子
                                            </li>
                                            <li class="panel-list-item">
                                                戒指
                                            </li>
                                            <li class="panel-list-item">
                                                手表腰带
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="sidebar-item ">
                                <img class="icon" src="../src/images/list_underwear.png" alt="">
                                <p class="sidebar-info">内衣袜子</p>
                                <div class="sidebar-panel">
                                    <div class="sidebar-panel-item">
                                        <h3 class="panel-item-title">男装</h3>
                                        <ul class="sidebar-panel-list">
                                            <li class="panel-list-item">
                                                全网爆款
                                            </li>
                                            <li class="panel-list-item">
                                                夏日限定
                                            </li>
                                            <li class="panel-list-item">
                                                耳饰
                                            </li>
                                            <li class="panel-list-item">
                                                发饰
                                            </li>
                                            <li class="panel-list-item">
                                                项链手链
                                            </li>
                                            <li class="panel-list-item">
                                                帽子
                                            </li>
                                            <li class="panel-list-item">
                                                戒指
                                            </li>
                                            <li class="panel-list-item">
                                                手表腰带
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="sidebar-item ">
                                <img class="icon" src="../src/images/list_phone.png" alt="">
                                <p class="sidebar-info">手机</p>/
                                <p class="sidebar-info">数码</p>
                                <div class="sidebar-panel">
                                    <div class="sidebar-panel-item">
                                        <h3 class="panel-item-title">男装</h3>
                                        <ul class="sidebar-panel-list">
                                            <li class="panel-list-item">
                                                全网爆款
                                            </li>
                                            <li class="panel-list-item">
                                                夏日限定
                                            </li>
                                            <li class="panel-list-item">
                                                耳饰
                                            </li>
                                            <li class="panel-list-item">
                                                发饰
                                            </li>
                                            <li class="panel-list-item">
                                                项链手链
                                            </li>
                                            <li class="panel-list-item">
                                                帽子
                                            </li>
                                            <li class="panel-list-item">
                                                戒指
                                            </li>
                                            <li class="panel-list-item">
                                                手表腰带
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="sidebar-item ">
                                <img class="icon" src="../src/images/linst_house.png" alt="">
                                <p class="sidebar-info">文娱</p>/
                                <p class="sidebar-info">家居</p>
                                <div class="sidebar-panel">
                                    <div class="sidebar-panel-item">
                                        <h3 class="panel-item-title">男装</h3>
                                        <ul class="sidebar-panel-list">
                                            <li class="panel-list-item">
                                                全网爆款
                                            </li>
                                            <li class="panel-list-item">
                                                夏日限定
                                            </li>
                                            <li class="panel-list-item">
                                                耳饰
                                            </li>
                                            <li class="panel-list-item">
                                                发饰
                                            </li>
                                            <li class="panel-list-item">
                                                项链手链
                                            </li>
                                            <li class="panel-list-item">
                                                帽子
                                            </li>
                                            <li class="panel-list-item">
                                                戒指
                                            </li>
                                            <li class="panel-list-item">
                                                手表腰带
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </aside>
                    <div class="banner-container">
                        <div class="swiper-container">
                            <div class="swiper-wrapper" id="wrapper">
                                {{each arr}}
                                <div class="swiper-slide">
                                    <img src="{{$value}}">
                                </div>
                                {{/each}}
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>
                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev swiper-button-white""></div>
                    <div class=" swiper-button-next swiper-button-white""></div>
                        </div>
                        <div class="banner-container-bottom">

                            <div class="banner-container-bottom-special box-shadow">
                                <h3 class="special-title">夏季女装上新</h3>
                                <p class="special-desc">速来抢购~</p>
                                <p class="special-go">go</p>
                                <img src="../src/images/zt_tsort.png" class="zt" alt="">
                            </div>
                            <div class="banner-container-bottom-special box-shadow">
                                <h3 class="special-title">夏季女装上新</h3>
                                <p class="special-desc">速来抢购~</p>
                                <p class="special-go">go</p>
                                <img src="../src/images/zt_Coupon.png" class="zt" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="extend">
                        <div class="extend-Pinkage box-shadow">
                            <h3 class="extend-title">9块9包邮</h3>
                            <div class="prompt">包你不吃亏</div>
                            <img class="gif" src="../src/images/9.9.gif" alt="">
                        </div>
                        <div class="extend-QR box-shadow">
                            <p class="extend-info">扫码下载APP</p>
                            <p class="extend-info">发现更多惊喜</p>
                            <img src="../src/images/zt_qr.png" alt="" class="QR">
                        </div>
                    </div>
                </div>
                <div class="title-bar">
                    <h3 class="tiele-bar-title">小编精选</h3>
                    <span class="title-bar-sort">每天更新</span>
                </div>
            </div>
    </script>
    <script type="text/html" id="items">
        <li class="choice-item" data-id="{{id}}">
            <div class="choice-item-img">
                <img src="{{image}}" alt="">
            </div>
            <div class="choice-item-info">
                <p class="choice-item-desc">
                    {{title}}
                </p>
                <div class="choice-item-keys">
                    <span class={{typeClass}}>{{type}}</span>
                    {{if isFreePostage}}
                    <span class="free-postage"">包邮</span>
                    {{/if}}
                    </div>
                    <div class=" choice-item-foot">
                        <div class="price">
                            <span class="price-tag">￥</span>
                            <span class="price-strong">{{priceStrong}}</span>
                            <span class="price-digit">.{{priceDigit}}</span>
                            <span class="sale-num">{{saleNum}}人已买</span>
                        </div>
                        {{if hasCoupon}}
                        <div class="coupon-value">
                            <span>{{couponValue}}</span>
                        </div>
                        {{/if}}
                </div>
            </div>
        </li>
    </script>
    <script type="text/html" id="tabList">
        <div id="tab-nav">
            <div class="banner-title">{{title}}</div>
            <ul class="tab">
                 {{each arr}}
                 <li class="tab-item">
                    {{$value}}
                  </li>
                  {{/each}}
                    </ul>
        </div>
    </script>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/swiper/swiper-bundle.min.js"></script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="../src/js/index.js"></script>
</body>

</html>